# TypeScript的笔记
# 安装
安装编译环境
# 安装命令
npm install typescript -g
# 查看版本
tsc --version
2
3
4
安装运行环境
npm install ts-node -g
另外，ts-node需要依赖tslib和@types/node两个包：
npm install tslib @types/node -g
运行
ts-node math.ts
# 类型
# 基本类型
string
number
boolean
只有两个取值：true和false
Array
数组类型的定义有两种：
const names: string[] = ["abc","abc"]
const names2: Array<string> = ["abc","abc"]
2
object
object对象类型可以描述一个对象：
const myInfo: object = {
name: "why",
age: 18
}
2
3
4
但是从myinfo中我们不能获取数据，也不能设置数据
Symbol
通过symbol可以在对象中定义相同的名称
null 和 undefined
let n:null = null
let u:undefined = undefined
2
any
unknown
用于描述类型不确定的变量
void
void通常用来指定一个函数是没有返回值的，那么它的返回值就是void类型
never
tuple
tuple是元组类型
tuple和数组的区别：
首先，数组中通常建议存放相同类型的元素，不同类型的元素是不推荐放在数组中。（可以放在对象或者元组中）
其次，元组中每个元素都有自己特性的类型，根据索引值获取到的值可以确定对应的类型。
# 可选类型
对象类型可以指定哪些属性是可选的，可以在属性的后面添加一个?
const obj = {
name:string,
age?:number
}
2
3
4
# 联合类型
TypeScript的类型允许我们使用多种运算符，从现有类型中构建新类型
function fun（id:number|string){
...
}
fun(10)
fun("abc")
2
3
4
5
# 缩小联合
function fun(id:number|string){
if(typeof id === 'string'){
...
}else{
...
}
}
2
3
4
5
6
7
# 类型别名
type Point = {
x:number
y:number
}
function printPoint(point:Point){
...
}
2
3
4
5
6
7
# 类型断言 as
有时候TypeScript无法获取具体的类型信息，这个我们需要使用类型断言（Type Assertions)
# 非空类型断言 ！
当我们确定传入的参数是有值的，这个时候我们可以使用非空类型断言。
# 可选链 ES11(ES2020)增加的特性
type Person = {
name:string
friend?:{
name:string
age?:number
}
}
const info:Person = {
...
}
console.log(info.friend?.name)
2
3
4
5
6
7
8
9
10
11
12
13
# ?? 和 !!
# 字面量类型
# 字面量推理
# 函数
# 函数类型
# 默认参数
function foo(x:number,y:number = 6){
console.log(x,y)
}
foo(10)
2
3
4
# 剩余参数
function sum(...nums:number[]){
let total = 0
for (const num of nums){
total += num
}
return total
}
const result1 = sum(10,20,30)
2
3
4
5
6
7
8
9
# 重载
function getLen(a:string):number;
function getLen(a:any[]):number;
function getLen(a:any){
return a.length
}
2
3
4
5
# 类 class
class Person {
name!:string
age:number
constructor(name:string,age:number){
this.age = age
}
running(){
console.log(this.name + " running")
}
eating(){
console.log(this.name + " eating")
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
类可以有自己的构建函数constructor，当我们通过new关键字创建一个示例时，构造函数会被调用；
类中可以有自己的函数，定义的函数称之为方法。
# 继承
我们使用extend关键字实现继承，子类中使用super来访问父类。
class Student extends Person{
sno:number
constructor(name:string,age:number,son:number){
super(name,age)
this.sno = sno
}
studing(){
console.log(this.name + " studing")
}
eating(){
console.log("student eating")
}
running(){
super.running()
console.log("student running")
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Student类中有自己的属性和方法，并且会继承Person的属性和方法；
在构造函数中，我们可以通过super来调用父类的构造方法，对父类的属性进行初始化。
# 成员修饰符 public private protected
# 只读属性 readonly
# getters/setters
# 静态成员
# 接口 interface
type Point = {
x:number
y:number
}
2
3
4
interfacr Point {
x:number
y:number
}
2
3
4
# 只读属性
# 索引类型
前面我们使用interface来定义对象类型，这个时候其中的属性名、类型、方法都是确定的，但是有时候我们会遇 到类似下面的对象：
# 接口继承
接口和类一样是可以进行继承的，也是使用extends关键字。
# 接口的实现
# interface和type区别
# 泛型
# 声明
# 声明文件
.d.ts
是用来做类型的声明(declare)。 它仅仅用来做类型检测，告知typescript我们有哪 些类型。
那么typescript会在哪里查找我们的类型声明呢？
- 内置类型声明 ；
- 外部定义类型声明；
- 自己定义类型声明；
# 声明模块
declare module '模块名'{
export ...
}
2
3
比如在开发vue的过程中，默认是不识别我们的.vue文件的，那么我们就需要对其进行文件的声明；
declare module '*.vue' {
import {DefineComponent} from 'vue'
const component: DefineComponent
export default component
}
2
3
4
5
6
比如在开发中我们使用了 jpg 这类图片文件，默认typescript也是不支持的，也需要对其进行声明；
declare module '*.jpg' {
const src: string
export default src
}
2
3
4
# 配置
tsconfig.json文件
tsconfig.json是用于配置TypeScript编译时的配置选项：https://www.typescriptlang.org/tsconfig
# 问题汇总
# script标签没有添加lang="ts"就会报错
Virtual script not found, may missing <script lang="ts"> / "allowJs": true / jsconfig.json.
解决tsconfig.json
"compilerOptions": {
"allowJs": true,
}
2
3